<template>
    <div id="index">
        <header>
            <h2>美发店</h2>
        </header>
        <main>
            <div class="content">
                <div class="first">
                    <van-swipe :autoplay="3000">
                        <van-swipe-item v-for="(image, index) in banner1" :key="index">
                          <img v-lazy="image" width="100%" height="240"/>
                        </van-swipe-item>
                      </van-swipe>
                </div>
                <div class="second">
                    <h4>——<b>潮IN美发</b>——</h4>
                    <div class="recommend">
                       <article>
                        <section v-for="item in serve" :key="item.serveId" @click="go(item.serveId)">
                            <img :src="item.subscribeImg" alt="">
                            <h5>{{item.serveName}}</h5>
                            <p>
                                <span class="s1">￥<b>{{item.servePrice}}</b></span>
                                <span>已约<i>{{item.subscribe}}</i></span>
                            </p>
                        </section>
                       </article>
                    </div>
                </div>
                <div class="third">
                    <h4>——<b>美发总监</b>——</h4>
                    <aside>
                        <div>
                            <section v-for="item in staff" :key="item.staffId">
                                <img :src="item.staffImg" width="150" height="120">
                                <p>{{item.staffName}}</p>
                            </section>
                        </div>
                    </aside>
                </div>
                <div class="forth">
                    <h4>——<b>本店卡项</b>——</h4>
                    <div>
                        <section v-for="item in card" :key="item.cardId" @click="go2(item.cardId)">
                                <img :src="item.cardImg">
                                <p>{{item.cardName}}{{item.countAll}}次/{{item.price}}</p>
                        </section>
                    </div>
                </div>
                <div class="fifth">
                    <h4>——<b>护发产品</b>——</h4>
                    <div>
                        <section v-for="item in goodsList" :key="item.goodsId" @click="go3(item.goodsId)">
                                <img :src="item.img">
                                <p class="p1">{{item.goodsName}}</p>
                                <p class="p2">{{item.specification}}</p>
                                <h6>￥<span>{{item.price}}</span></h6>
                        </section>
                    </div>
                </div>
                <div class="sixth">
                    <h4>——<b>工作室环境</b>——</h4>
                    <van-swipe :autoplay="2000">
                        <van-swipe-item v-for="(image, index) in banner2" :key="index">
                          <img v-lazy="image" />
                        </van-swipe-item>
                      </van-swipe>
                </div>
            </div>
        </main>
        <Bottom></Bottom>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';
import axios from "axios"

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
import Bottom from '@/components/bottom.vue';
    export default {
        components:{
            Bottom
        },
        data(){
           return{
            serve:[],
            banner1: [],
            banner2:[],
            staff:[],
            card:[],
            goodsList: [],
            }
        },
        methods:{
           async getIndex(){
               let res = await axios({
                    url:"http://192.168.20.106:8000/api/index",
                    method:"get",
                })
                console.log(res);
                this.banner1 = res.data.data.banner1
                this.banner2 = res.data.data.banner2
                this.card = res.data.data.card
                this.staff = res.data.data.staff
                this.goodsList = res.data.data.goodsList
                this.serve = res.data.data.serve
            },
            go(id){
                this.$router.push({path:"/fashion",query:{id:id}})
                // console.log(id);
            },
            go2(id){
                this.$router.push({path:"/cards",query:{id:id}})
            },
            go3(id){
                this.$router.push({path:"/detailsNew",query:{id:id}})
            },
        },  
        mounted(){
            this.getIndex()
        }
    }
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
img{
    display: block;
}
a{
    text-decoration: none;
}
b{
    font-weight: normal;
}
i{
    font-style: normal;
}
#index{
    background-color: #f2f2f2;
}
header{
    width: 100%;
    height: 44px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
header h2{
    width: 100%;
    height: 44px;
    color: #1e0707;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
}
main{
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    padding-top: 44px;
    padding-bottom: 44px;
    box-sizing: border-box;
}
.content{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.first{
    margin-top: 10px;
    margin-bottom: 10px;
    background: #fff;
}
.second{
   background: #fff;
   overflow: hidden;
    width: 100%;
}
h4{
   font-size: 20px;
   color: #999;
   line-height: 44px;
   height: 44px;
   width: 100%;
   text-align: center;
   margin-top: 10px;
}
h4 b{
    color: #1e0707;
}

.second .recommend{
    width: 100%;
    overflow-x: auto;
}
.recommend article{
    width: 150%;
    display: flex;
    justify-content: space-between;
}
.recommend article section{
    margin-right: 10px;
    margin-left: 5px;
    border: 1px solid #666;
    border-radius: 5px;
}
.recommend section h5{
    font-weight: normal;
    font-size: 18px;
    line-height: 20px;
    height: 20px;
    color: #1e0707;
    margin-top: 5px;
    margin-bottom: 5px;
}
.recommend img{
    width:170px;
    height: 150px;
}
.recommend section p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    color: #666;
}
.recommend section p .s1{
    color: #ef0909;
    font-style: bolder;
}
.recommend section p .s1 b{
    font-size: 24px;
}
.third{
    width: 100%;
    background: #fff;
    margin-bottom: 10px;
}
.third aside{
    width: 100%;
    overflow-x: scroll;
}
.third aside>div{
    width: 150%;
    background: #fff;
    display: flex;
    
}
.third aside>div section{
    background: #fff;
    margin-right: 10px;
    margin-left: 20px;
    border: 1px solid #777;
    box-shadow: 8px 16px 16px hsl(0deg 0% 0%/0.25);
}
.third aside>div section p{
    line-height: 40px;
    height: 40px;
    font-size: 16px;
}
.forth{
    width: 100%;
    background: #fff;
    margin-bottom: 10px;
}
.forth>div{
    display: flex;
    justify-content: space-between;
}
.forth>div img{
    width: 180px;
    height: 100px;
}
.forth>div section{
    background: #f1f1f1;
    border-radius: 5px;
}
.forth>div p{
    line-height: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: bolder;
    color: #1e0707;
    margin-bottom: 10px;
}
.fifth{
    background: #fff;
    width: 100%;
    margin-bottom: 10px;
}
.fifth>div{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.fifth>div section{
    border: 1px solid #777;
    margin-right: 10px;
    margin-bottom: 20px;
   
}
.fifth img{
    width: 150px;
    height: 120px;
}
.fifth .p1{
    width: 150px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    height:50px;
}
.fifth .p2{
    font-size: 14px;
    color: #777;
    height:20px;
}
h6{
    width: 150px;
    height: 20px;
    margin-top: 15px;
    line-height: 20px;
    font-size: 12px;
    color: #ef0909;
}
h6 span{
    font-size: 18px;
    margin-left: 5px;
}
.sixth{
    width: 100%;
    background: #fff;
}
.sixth img{
    width: 100%;
    height: 150px;
}
</style>